import 'package:flutter/material.dart';

/// 自定义开关按钮组件
/// 
/// 提供一个带有文字的开关按钮，可以在开启和关闭状态显示不同的文字
class SwitcMyButton extends StatelessWidget {
  /// 当前开关状态
  final bool value;
  
  /// 开启状态显示的文字
  final String activeText;
  
  /// 关闭状态显示的文字
  final String inactiveText;
  
  /// 开启状态的背景颜色
  final Color activeColor;
  
  /// 开启状态的文字颜色
  final Color activeTextColor;
  
  /// 关闭状态的文字颜色
  final Color inactiveTextColor;
  
  /// 状态改变时的回调
  final ValueChanged<bool> onChanged; 
  
  /// 按钮宽度
  final double width;
  
  /// 按钮高度
  final double height;
  
  /// 圆形滑块的直径
  final double thumbSize;
  
  /// 文字与边缘的间距
  final double padding;

  /// 构造函数
  const SwitcMyButton({
    super.key,
    required this.value,
    required this.activeText,
    required this.inactiveText,
    this.activeColor = const Color.fromARGB(255, 58, 182, 64),
    this.activeTextColor = Colors.white,
    this.inactiveTextColor = Colors.red,
    required this.onChanged,
    this.width = 70,
    this.height = 32,
    this.thumbSize = 26,
    this.padding = 8,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onChanged(!value),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        height: height,
        width: width, 
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(height / 2),
          color: value ? activeColor : Colors.grey.shade300,
        ),
        child: Stack(
          children: [
            // 开启状态的文字 - 左侧
            AnimatedOpacity(
              opacity: value ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 300),
              child: Container(
                padding: EdgeInsets.only(left: padding),
                alignment: Alignment.centerLeft,
                child: Text(
                  activeText,
                  style: TextStyle(
                    color: activeTextColor,
                    fontSize: 14,
                  ),
                ),
              ),
            ),
            
            // 关闭状态的文字 - 右侧
            AnimatedOpacity(
              opacity: value ? 0.0 : 1.0,
              duration: const Duration(milliseconds: 300),
              child: Container(
                padding: EdgeInsets.only(right: padding),
                alignment: Alignment.centerRight,
                child: Text(
                  inactiveText,
                  style: TextStyle(
                    color: inactiveTextColor,
                    fontSize: 14,
                  ),
                ),
              ),
            ),
            
            // 滑块的平滑动画
            AnimatedPositioned(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              left: value ? width - thumbSize - padding/2 : padding/2,
              top: (height - thumbSize) / 2,
              child: Container(
                width: thumbSize,
                height: thumbSize,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Theme.of(context).colorScheme.surface, 
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 4,
                      spreadRadius: 1,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
} 